<template>
  <!-- 选择支付方式的组件 -->
  <div class="payway-box flex">
    <div @click="selectPayway(item.id)" :class="{ active: payId == item.id }" class="payway-item" v-for="item in paywayList" :key="item.id">
      <img :src="item.icon" alt="" />
      <span>
        {{ item.name }}
      </span>
      <span class="font20" v-if="item.id==3">¥{{ shopInfo.availableMoney||0 }}</span>
      <span class="icon el-icon-success">

      </span>

    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  props: ["payWay", "showYue"],
  computed: {
    ...mapGetters(["userInfo", "shopInfo"]),
  },
  data() {
    return {
      payId: "",
      paywayList: [],
    };
  },
  watch: {
    payWay: {
      handler(newVal) {
        this.payId = newVal;
      },
      immediate: true,
    },
    showYue: {
      handler(newVal) {
        if (newVal==1) {
          this.paywayList = [
            {
              name: "余额",
              id: 3,
              icon: "https://imgage.maimaihao.com/yuduhulian/erp/static/icon/qianbao.png",
            },
            {
              name: "支付宝",
              id: 2,
              icon: "https://imgage.maimaihao.com/yuduhulian/erp/static/icon/zfblogo.png",
            },
            // {
            //   name: "微信支付",
            //   id: 1,
            //   icon: "https://imgage.maimaihao.com/yuduhulian/erp/static/icon/wxlogo.png",
            // },
          ];
          
        }else if (newVal==2) {
          this.paywayList = [
            {
              name: "余额",
              id: 3,
              icon: "https://imgage.maimaihao.com/yuduhulian/erp/static/icon/qianbao.png",
            },
          ];
          
        } else {
          this.paywayList = [
            {
              name: "支付宝",
              id: 2,
              icon: "https://imgage.maimaihao.com/yuduhulian/erp/static/icon/zfblogo.png",
            },
            // {
            //   name: "微信支付",
            //   id: 1,
            //   icon: "https://imgage.maimaihao.com/yuduhulian/erp/static/icon/wxlogo.png",
            // },
          ];
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    selectPayway(paywayId) {
      this.payId = paywayId;
      this.$emit("selectPayway", paywayId);
    },
  },
};
</script>
<style scoped lang="scss">
.payway-box {
  // justify-content: flex-end;
}
.payway-item {
  // width: 150px;
  border: 1px solid #999;
  border-radius: 2px;
  padding: 5px 20px;
  margin-left: 15px;
  margin-bottom: 15px;
  font-size: 18px;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  &:first-of-type {
    margin-left: 0;
  }

  img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .icon {
    display: none;
    position: absolute;
    top: 4px;
    right: 3px;
    color: #ff9717;
  }
  &.active {
    border: 2px solid #ff9717;
    .icon {
      display: block;
    }
  }
}
</style>
